<template>

 <div style="width: 99%">
   <div >
     <el-breadcrumb separator="/">
       <!--     <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
       <!--     <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>-->
       <el-breadcrumb-item>系统管理</el-breadcrumb-item>
       <el-breadcrumb-item>用户管理</el-breadcrumb-item>
     </el-breadcrumb>
   </div>

   <div style="float: left;margin-top: 8px;margin-bottom: 8px">
     <el-button type="primary" @click="_add">添加</el-button>
   </div>


   <div style="margin-top: 20px">

     <EleTable ref="eleTableRef"
               url="/api/base/sys_user/page_vo"
               :columnName="columnName"
               :queryObj="queryObj"
               :optList="optList"
               @opt-click="_opt">

     </EleTable>


   </div>
   <SysUserEdit ref="sysUserEditRef"  @on-result-change="_page"></SysUserEdit>
   <SysUserAdd ref="sysUserAddRef"  @on-result-change="_page"></SysUserAdd>
   <EleDetail ref="sysUserEleDetailRef" :formList="formList" :formObj="formObj" title="用户详情"  @on-result-change="_page"></EleDetail>
 </div>

</template>

<script>

  import  SysUserEdit from  './SysUserEdit'
  import  SysUserAdd from  './SysUserAdd'
  import EleTable from "../../../common/EleTable.vue";
  import EleDetail from "../../../common/EleDetail.vue";
    export default {

      mounted(){
        this._page();
      },
      components:{
        EleDetail,
        EleTable,
        SysUserEdit,
        SysUserAdd,
      },
        name: "Home",
        data(){
          return {

            currentPage:1, //初始页
            pageSize:10,    //    每页的数据
            total:0,    //    每页的数据
            getPage:[],
            queryObj: {},//查询参数
            formObj:{},
            optList:[
              {name:"查看",key:'detail'},
              {name:"编辑",key:'edit'},
            ],
            columnName:[
              {prop:"username",label:"用户名",width:"120",fixed:true},
              {prop:"realName",label:"真实姓名",width:"120",fixed:true},
              {prop:"depts",label:"所属部门",width:"120",fixed:true},
              {prop:"sex",label:"性别",width:"120",fixed:true},
              {prop:"birth",label:"出生日期",width:"120"},
              {prop:"phone",label:"电话号",width:"120"},
            ],
            formList:[
              {prop:"username",label:"用户名",width:"120",fixed:true},
              {prop:"realName",label:"真实姓名",width:"120",fixed:true},
              {prop:"depts",label:"所属部门",width:"120",fixed:true},
              {prop:"sex",label:"性别",width:"120",fixed:true},
              {prop:"birth",label:"出生日期",width:"120"},
              {prop:"phone",label:"电话号",width:"120"},
            ],
          }
        },
      methods:{
        handleClick(data){
          console.log(data);
        },

        handleSizeChange(val) {
        this.pageSize=val;
        this._page();
        },
        handleCurrentChange(val) {
         this.currentPage=val;
          this._page();
        },

        _page(){
          this.$http.post('/api/base/sys_user/page_vo',{pageSize:this.pageSize,pageNum:this.currentPage}).then(res=>{
           let data= res.data.data;
            this.getPage=data.records;
            console.log('----------------data',data)
            console.log('-----------------',data.total)
            this.total=data.total;
           }).catch(err=>{
             console.log(err)
           });
        },

        _edit(row){
          this.$refs.sysUserEditRef._open(row);
        },

        _opt(data,key){
          switch (key){
            case 'edit':
              alert('编辑');
              break;
            case 'detail':
              this.$http.get('/api/base/sys_user/'+data.id).then(res=>{
                this.formObj=res.data.data;
                this.$refs.sysUserEleDetailRef._open();
              }).catch(err=>{

              });
              break;
          }
        },

        _add(){
          this.$refs.sysUserAddRef._open();
        },


      },
    }
</script>

<style scoped>

</style>
